<!--  -->
<template>
  <div id="aiCreateSpacePortal" class="f-12">
    <div class="headTop">
      <div class="himg">
        <img :src="member.avatar" alt="" />
      </div>
      <div class="userBox">
        <div class="name">{{ member ? member.nickname : "" }}</div>
      </div>

      <van-button v-if="interests_transfer" @click.stop="showTransfer = true" round plain hairline size="small" color="var(--themeBaseColor)" class="margin-right-8">转赠</van-button>
      <van-button round size="small" color="var(--themeBaseColor)" @click.stop="toUrl('searchAll', {} , { plugin_id: 198 })">购买权益</van-button>
    </div>

    <div style="margin-top: -3.125rem;">
      <van-cell-group inset class="bg-fff">
        <van-cell title="AI创作权益" title-class="f-bold f-15 t-l" :border="false" />
        <div class="padding-left-12 padding-right-12">
          <van-row style="margin-bottom: 0.3rem;">
            <van-col span="12" class="t-l" >{{ video_duration ? video_duration.used : 0 }}/{{ video_duration ? video_duration.total : 0 }}</van-col>
            <van-col span="12" class="t-r" @click.stop="toUrl('aiCreateRecord')" data-url="/mircoApp/ai-create/record/index">
              <div class="flex-a-c" style="justify-content: flex-end;">视频总时长明细<i class="iconfont icon-advertise-next"></i></div>
            </van-col>
          </van-row>
          <van-progress :percentage="percentage" stroke-width="8px" :show-pivot="false" color="var(--themeBaseColor)" />
        </div>
        <van-row custom-class='padding-top-12 padding-bottom-12' style="margin: 0.8rem 0;">
          <van-col span="8" v-for="(item,index) in member_statistics" :key="index">
            <div class="flex-column t-c" style="margin-bottom: 8px;">
              <div class="f-bold f-15">{{ item.value }}</div>
              <div class="f-14">{{item.title}}</div>
            </div>
          </van-col>
        </van-row>
      </van-cell-group>

      <van-cell-group inset class="bg-fff m-t-10" v-for="item in list" :key="item.business_id">
        <van-cell :title="item.title" title-class="f-bold f-15 f-grow-2 t-l" :border="false">
          <div v-if="item.identity">
            <van-tag type="danger" color="#F5F5F5" text-color="#6E6E79">{{ item.identity }}</van-tag>
          </div>
        </van-cell>

        <van-row>
          <van-col span="6">
            <div class="flex-column t-c">
              <div class="f-bold f-13">{{ item.storage_space }}</div>
              <div>存储空间</div>
            </div>
          </van-col>
          <van-col span="6">
            <div class="flex-column t-c">
              <div class="f-bold f-13">{{ item.create_count }}</div>
              <div>创作数量</div>
            </div>
          </van-col>
          <van-col span="6">
            <div class="flex-column t-c">
              <div class="f-bold f-13">{{ item.create_duration }}</div>
              <div>创作时长</div>
            </div>
          </van-col>
          <van-col span="6" v-if="item.body_clone">
            <div class="flex-column t-c">
              <div class="f-bold f-13">{{ item.body_clone }}</div>
              <div>数字分身</div>
            </div>
          </van-col>
        </van-row>

        <div class="padding-12 flex" style="justify-content: flex-end;">
          <van-button
            @click.stop="toUrl('aiCreatePerSpace', {} , { business_id: item.business_id || 0 })"
            round
            plain
            hairline
            size="small"
            color="var(--themeBaseColor)"
            class="margin-right-8"
            >管理</van-button
          >
          <van-button @click.stop="toUrl('aiCreateVideoCreation', {} , { business_id: item.business_id || 0 })"  round size="small" color="var(--themeBaseColor)"
            >创作视频</van-button
          >
        </div>
      </van-cell-group>
    </div>

    <div style="height: 5rem;"></div>

    <van-popup v-model="showTransfer" class="pop-base-class t-l" position="bottom" round style="background-color: #F5F5F5;" closeable>
      <div class="pop-base-title">转赠协议</div>
      <div class="pop-base-content">
        <van-cell-group inset>
          <van-field
            center
            v-model="member_id"
            label="接收人ID"
            placeholder="请输入会员ID"
            error-message-align="right"
            :error-message="memberTransfer ?memberTransfer.nickname : ''"
            @input="transferIdinp"
            input-align="right"
          />
          <van-cell title="选择有效权益" :value="activeBenefit.name || ''" is-link @click="showeBenefitList = true" />
          <template v-if="activeBenefit.id">
            <van-field
              label-width="6.2rem"
              v-model="form.storage_space_total"
              label="存储空间"
              :placeholder="`最多可转赠${activeBenefit.storage_space_unused}GB`"
              @input="onChangeField($event, 'storage_space_total', 'storage_space_unused')"
              :error-message="form.storage_space_total ? '最多可转赠' + activeBenefit.storage_space_unused + 'GB' : ''"
            >
              <div slot="right-icon">GB</div>
            </van-field>
            <van-field
              label-width="6.2rem"
              v-model="form.body_clone_total"
              label="数字分身"
              :placeholder="`最多可转赠${activeBenefit.body_clone_unused}个`"
              @input="onChangeField($event, 'body_clone_total', 'body_clone_unused')"
              :error-message="`${form.body_clone_total ? '最多可转赠' + activeBenefit.body_clone_unused + '个' : ''}`"
            >
              <div slot="right-icon">个</div>
            </van-field>
            <van-field
              label-width="6.2rem"
              v-model="form.audio_clone_total"
              label="声音克隆"
              :placeholder="`最多可转赠${activeBenefit.audio_clone_unused}个`"
              @input="onChangeField($event, 'audio_clone_total', 'audio_clone_unused')"
              :error-message="`${form.audio_clone_total ? '最多可转赠' + activeBenefit.audio_clone_unused + '个' : ''}`"
            >
              <div slot="right-icon">个</div>
            </van-field>
            <van-field
              label-width="6.2rem"
              v-model="form.audio_cv_total"
              label="声音克隆CV版"
              :placeholder="`最多可转赠${activeBenefit.audio_cv_unused}个`"
              @input="onChangeField($event, 'audio_cv_unused', 'audio_cv_unused')"
              :error-message="`${form.audio_cv_total ? '最多可转赠' + activeBenefit.audio_cv_unused + '个' : ''}`"
            >
              <div slot="right-icon">个</div>
            </van-field>
            <van-field
              label-width="6.2rem"
              v-model="form.video_duration_total"
              label="视频创作"
              :placeholder="`最多可转赠${activeBenefit.video_duration_unused}分钟`"
              @input="onChangeField($event, 'video_duration_total', 'video_duration_unused')"
              :error-message="`${form.video_duration_total ? '最多可转赠' + activeBenefit.video_duration_unused + '分钟' : ''}`"
            >
              <div slot="right-icon">分钟</div>
            </van-field>
            <van-field
              label-width="6.2rem"
              v-model="form.lip_duration_total"
              label="唇形匹配"
              :placeholder="`最多可转赠${activeBenefit.lip_duration_unused}秒`"
              @input="onChangeField($event, 'lip_duration_total', 'lip_duration_unused')"
              :error-message="`${form.lip_duration_total ? '最多可转赠' + activeBenefit.lip_duration_unused+'分钟':''}`"
            >
              <div slot="right-icon">次</div>
            </van-field>
            <van-field
              label-width="6.2rem"
              v-model="form.paperwork_total"
              label="文案创作"
              :placeholder="`最多可转赠${activeBenefit.paperwork_unused}次`" 
              @input="onChangeField($event, 'paperwork_total', 'paperwork_unused')"
              :error-message="`${form.paperwork_total ? '最多可转赠' + activeBenefit.paperwork_unused + '次' : ''}`"
            >
              <div slot="right-icon">次</div>
            </van-field>
          </template>
        </van-cell-group>
      </div>
      <div class="pop-base-bottom">
        <van-button @click.stop="submitTransfer" round color="var(--themeBaseColor)" type="danger" block style="height: 40px;">确认转赠</van-button>
      </div>
    </van-popup>

    <van-popup v-model="showeBenefitList" class="pop-base-class t-l" position="bottom" round style="background-color: #F5F5F5;" :style="{ height: '50%' }"  closeable @open="beforeBenefitList">
      <div class="pop-base-title">选择有效权益</div>
      <van-list v-model="Benefit_loading" :finished="Benefit_finished" finished-text="没有更多了" @load="BenefitList">
        <van-radio-group v-model="transferID">
          <van-cell-group inset>
            <van-cell :title="item.name" clickable data-index="index" @click="onClickRadio(index)" v-for="(item, index) in benefitList" :key="item.id">
              <template #right-icon>
                <van-radio :name="item.id" checked-color="var(--themeBaseColor)" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <div style="height: 40px;"></div>
      </van-list>
      <div class="pop-base-bottom" @click.stop="showeBenefitList = false">
        <van-button round type="danger" color="var(--themeBaseColor)" block style="height: 40px;">确认</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import _ from "lodash";
export default {
  data() {
    return {
      showTransfer: false,
      showeBenefitList: false,
      Benefit_finished: false,
      Benefit_loading: false,
      benefitList: [],
      memberTransfer: {},
      interests_transfer: 0,
      list: [],
      member: {},
      member_statistics: {},
      percentage: 100,
      activeBenefit: {},

      member_id: "",
      form: {}
    };
  },

  activated() {
    this.getData();
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    async getData() {
      let { result, msg, data } = await $http.get("plugin.ai-create.frontend.controllers.center.index", {}, ".");
      if (result == 0) return this.$toast(msg);
      let percentage = (Number(data.member_statistics.video_duration ? data.member_statistics.video_duration.used : "") / Number(data.member_statistics.video_duration ? data.member_statistics.video_duration.total : "")) * 100 || 0;
      data.percentage = percentage;
      // 将data的数据合并到this上
      Object.assign(this, data);
    },
    toUrl(name, params = {}, query = {}) {
      if (!name) return;
      this.$router.push(this.fun.getUrl(name, params, query));
    },
    transferIdinp() {
      if (this.member_id) this.getMember();
    },
    async getMember() {
      let { result, msg, data } = await $http.get("plugin.ai-create.frontend.controllers.member.transfer.get-member", { member_id: this.member_id }, ".");
      if (result == 0) return this.$toast(msg);
      this.memberTransfer = data;
    },
    beforeBenefitList() {
      if (this.benefitList && this.benefitList.length) return;
      this.BenefitList();
    },
    async BenefitList() {
      if (this.Benefit_finished) return;
      this.Benefit_loading = true;
      let { result, msg, data } = await $http.get("plugin.ai-create.frontend.controllers.member.transfer.get-list", { page: this.BenefitPage || 1 }, ".");
      this.Benefit_loading = false;
      if (result == 0) return this.$toast(msg);

      let benefitList = this.benefitList || [];
      this.benefitList = benefitList.concat(data.data);

      if (data.current_page == data.last_page) {
        return (this.Benefit_finished = true);
      }
      this.BenefitPage = data.current_page + 1;
    },
    onClickRadio(index) {
      const _data = this.benefitList[index];
      this.activeBenefit = _data;
      this.transferID = _data.id;
      console.log(this.benefitList,index,this.transferID,3232323,_data);
    },
    onChangeField(event, name, atter) {
      const val = event;
      this.form[name] = val >= this.activeBenefit[atter] ? this.activeBenefit[atter] : val;
    },
    async submitTransfer() {
      if (!this.memberTransfer || !this.memberTransfer.uid) {
        this.$toast("请填写接收人ID");
        return;
      }
      if (!this.transferID) {
        this.$toast("请选择有效权益");
        return;
      }
      let { result, msg, data } = await $http.post(
        "plugin.ai-create.frontend.controllers.member.transfer.index",
        {
          member_id: this.memberTransfer ?this.memberTransfer.uid : "",
          id: this.transferID,
          form: this.form
        },
        "."
      );
      if (result == 0) return this.$toast(msg);
      this.showTransfer = false;
      this.memberTransfer = {};
      this.activeBenefit = [];
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .van-button {
  min-width: 80px;
}
.pop-base-class .pop-base-title {
  margin: 18px 12px 12px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  text-align: left !important;
}
.pop-base-class .pop-base-content {
  min-height: 45vh;
  max-height: 60vh;
  overflow: scroll;
  padding: 0 0px 60px;
}
.pop-base-class .pop-base-bottom {
  padding: 10px 14px;
  background: #ffffff;
}
.m-0 {
  margin: 0;
}
.bg-fff {
  background-color: #ffffff;
}
.m-t-10 {
  margin-top: 10px !important;
}
.margin-right-8 {
  margin-right: 8px;
  min-width: 60px;
}
.border-radius-10 {
  border-radius: 10px;
}
.padding-8 {
  padding: 8px;
}
.padding-12 {
  padding: 12px;
}
.padding-left-12 {
  padding-left: 12px;
}
.padding-right-12 {
  padding-right: 12px;
}
.padding-top-12 {
  padding-top: 12px;
}
.padding-bottom-12 {
  padding-bottom: 12px;
}
.headTop {
  padding: 1.5rem 0.75rem 4.6875rem;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--themeBaseColor)), to(#f5f5f5));
  background-image: -webkit-linear-gradient(var(--themeBaseColor), #f5f5f5);
  background-image: linear-gradient(var(--themeBaseColor), #f5f5f5);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.headTop .userBox {
  display: flex;
  flex-direction: column;
  margin-left: 0.4375rem;
  text-align: left;
  flex: 1;
}
.headTop .userBox .name {
  font-size: 0.9375rem;
  color: #ffffff;
  font-weight: bold;
}

.headTop .himg {
  width: 3.4375rem;
  height: 3.4375rem;
  border-radius: 100%;
  border: 2px solid #ffffff;
}
.headTop .himg img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
</style>
